<template>
  <div class="container">
    <section class="top">
      <img :src="url_head + product.pic" alt />
      <div class="top__right">
        <section>
          <h3>{{product.productCategoryName}}</h3>
          <p>商品数量:{{product.stock }}</p>
          <p>新旧程度:{{product.qualityLevel}}</p>
          <p>发布时间:{{time}}</p>
          <p>所在城市:{{product.detailTitle}}</p>
          <p>
            价格:
            <span class="amount">{{product.originalPrice}}元/个</span>
          </p>
        </section>
        <el-button type="success" size="small" @click="onChat(product.memberId)">私信他</el-button>
      </div>
    </section>
    <el-divider />
    <section class="under">
      <h2>商品详情</h2>
      <div class="pic-box">
        <img
          :src="url_head + item.pic"
          alt
          v-for="(item, index) in pic_list"
          :key="index"
        />
      </div>
    </section>
  </div>
</template>
<script>
  import { doInfo } from '@/apis/product';
  import { doMessage } from '@/utils/message';
  // import { doGetUsername } from '@/apis/user';
  export default {
    name: 'ExchangeInfo',
    data() {
      return {
        url_head: 'http://121.199.12.118:8083',
        pic_list: [],
        product: {},
        usrname: '',
        time: ''
      };
    },
    methods: {
      async fetchInfo() {
        const params = { productId: this.$route.query.id };
        const res = await doInfo(params);
        // console.log('info -------------------');
        // console.log(res.data);
        if (res.data.pics.length !== 0) {
          this.pic_list = res.data.pics;
        } else {
          this.pic_list = [{ pic: res.data.pic }];
        }
        // console.log(this.pic_list);
        if ((res.data.pic === undefined) || (res.data.pic == null)) {
          return;
        }
        if (res.data.pic.indexOf('/var/upload') !== -1) {
          this.url_head = 'http://121.199.12.118:8083';
        } else {
          this.url_head = '';
        }
        this.product = res.data;
        this.time = this.product.createTime.substr(0, 19).replace('T', ' ');
        // console.log(this.product);
        /*
        res = await doGetUsername(this.product.memberId);
        if ((res !== undefined) || (res !== null)) {
          console.log('res--------------------->');
          console.log(res);
        }
        */
      },
      onChat(memberId) {
        this.$store.commit('msgMember', memberId);
        doMessage(this, true);
      }
    },
    async mounted() {
      await this.fetchInfo();
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.container {
  margin-top: 15px;
  padding: 15px;
  background: white;
}

.amount {
  color: #f15a23;
  font-weight: bold;
  margin-left: 4px;
  font-size: 18px;
}

.top {
  @include h-btw();
  img {
    height: 340px;
    width: 300px;
    margin-right: 15px;
  }
  .top__right {
    @include v-btw();
    width: 0;
    flex-grow: 1;
    p {
      font-size: 14px;
    }
  }
}

.under {
  h2 {
    text-align: center;
  }
  .pic-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      margin-top: 20px;
      width: 50%;
    }
  }
}
</style>
